<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>CSS3 box-shadow属性</title>

    <style type="text/css">

        #div1{

            width: 100px;

            height: 100px;

            text-align: center;

            line-height: 100px;

            border: 1px solid grey;

            transition: box-shadow 1s ease-in-out;

            -webkit-transition: box-shadow 1s ease-in-out;

            -moz-transition: box-shadow 1s ease-in-out;

            -o-transition: box-shawdow 1s ease-in-out;
        }

        #div1:hover
        {

            width:100px;

            height:100px;

            line-height:100px;

            text-align:center;

            box-shadow:-5px 0 12px red,0 -5px 12px yellow,0 5px 12px blue,5px 0 12px green;

        }

    </style>

</head>

<body>

<div id="div1">外阴影</div>

</body>
</html>